<script setup lang="ts">
import { ref } from 'vue'

let date = ref('')


function getData() {
  const startDate: any = new Date(2024, 12, 21);
  const now: any = new Date();
  const diff = now - startDate;
  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((diff % (1000 * 60)) / 1000);
  date.value = days + '天 ' + hours + '小时 ' + minutes + '分钟 ' + seconds + '秒'
}

// 这个函数用于按照指定的时间间隔，重复执行一个函数或者代码片段。会一直重复执行
setInterval(getData, 1000);

</script>

<template>
  <div class="foot">

    <div class="items">

      <div class="item">
        <div class="word-box">
          Copyright © 2024
        </div>
        <div class="number-box">
          菜鸟拯救世界
        </div>
      </div>

      <div class="item">
        <div class="word-box">
          本站已运行
        </div>
        <div class="number-box" style="background-color: hotpink;">
          {{ date }}
        </div>
      </div>

      <a class="item" href="https://beian.miit.gov.cn/" style="text-decoration: none;">
        <div class="word-box">
          豫ICP备
        </div>
        <div class="number-box" style="background-color: antiquewhite;">
          2024093375号
        </div>
      </a>

      <div class="item">
        <div class="word-box">
          豫公网安备
        </div>
        <div class="number-box" style="background-color: azure;">
          41160302000121
        </div>

      </div>

    </div>
  </div>
</template>

<style scoped>
.foot {
  background-color: aliceblue;
  height: 100%;
  width: 100%;
}

.items {
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  /* border-radius: 0.1rem; */
  /* 对应的位置是  上右下左 */
  margin: 0 3px 0 3px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.46rem;
}

.word-box {
  padding: 0.2rem;
  background-color: #5d5d5d;
  color: #fff;
  border-top-left-radius: 0.35rem;
  border-bottom-left-radius: 0.35rem;
}

.number-box {
  padding: 0.2rem;
  background-color: aqua;
  border-top-right-radius: 0.35rem;
  border-bottom-right-radius: 0.35rem;

}

/* 手机设备样式 */
@media (max-width: 480px) {

  .items {
    flex-direction: column;
    
  }
  .item {
     /* 对应的位置是  上右下左 */
  margin: 3px 0 3px 0;
  }


}
</style>
